import React from 'react'
import * as ReactDOM from 'react-dom'

export class RenderInBody extends React.Component {
    componentDidMount() {
        this.container = document.createElement("div");
        document.body.appendChild(this.container);
        if (this.props.className) {
            this.container.classList.add(this.props.className)
        }
        this._renderLayer();
    }

    componentDidUpdate() {
        this._renderLayer();
    }

    componentWillReceiveProps(nextProps) {
        if (this.props.active !== nextProps.active) {
            if (nextProps.active) {
                this.container.classList.add('active')
            } else {
                this.container.classList.remove('active')
            }
        }
    }

    componentWillUnmount() {
        ReactDOM.unmountComponentAtNode(this.container);
        document.body.removeChild(this.container);
    }

    _renderLayer() {
        ReactDOM.render(this.props.children, this.container);
    }

    render() {
        return null
    }
}